<template>
  <div class="grid">
    <div class="row" v-for="(item,index) in gridArr" :key="index" >
      <div :class="['col',val.color]" v-for="val in item" :key="val.id" >{{val.x}},{{val.y}}</div>
    </div>
    <button @click="downBlock">点击下移</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      row: 19, // 游戏区方块行
      col: 10, // 游戏区方块列
      footerArr: [{x: 0, y: 0, color: 'c1'}, {x: 0, y: 1, color: 'c1'}, {x: 0, y: 2, color: 'c1'}, {x: 1, y: 1, color: 'c1'}],
      currentDynamicBlock: [{x: 0, y: 3, color: 'c1'}, {x: 0, y: 4, color: 'c1'}, {x: 0, y: 5, color: 'c1'}, {x: 1, y: 4, color: 'c1'}], // 当前下落的的方块
      gridArr: [], // 游戏区方块二位数组
      gridArrFormat: [] // 游戏区方块一维数组

    }
  },
  created () {
    this.initGrid()
    console.log(this.col1)
  },
  methods: {
    // 绘制游戏区方块
    initGrid () {
      let row = new Array(this.row).fill('')
      let col = new Array(this.col).fill('')
      let currentDynamicBlock = this.currentDynamicBlock
      let grid = []
      row.forEach((val, x) => {
        col.forEach((el, y) => {
          grid.push({x, y, color: '', id: `${x}${y}`})
        })
      })
      this.gridArrFormat = this.ergodicArrColouring(grid, currentDynamicBlock, 'add')
      this.gridArr = this.twoDimenArrayGetArr(grid)
    },
    downBlock () {
      let currentDynamicBlock = this.currentDynamicBlock
      let gridArrFormat = this.gridArrFormat
      currentDynamicBlock.forEach(val => {
        val.x = val.x + 1
      })
      this.currentDynamicBlock = currentDynamicBlock
      gridArrFormat = this.ergodicArrColouring(gridArrFormat, currentDynamicBlock, 'remove')
      gridArrFormat = this.ergodicArrColouring(gridArrFormat, currentDynamicBlock, 'add')
      this.gridArrFormat = gridArrFormat
      this.gridArr = this.twoDimenArrayGetArr(gridArrFormat)
    },
    // 将要下落方块
    // downBlock () {

    // },
    // 一维数组转二维数组
    twoDimenArrayGetArr (arr) {
      let twoDimenArr = []
      arr.forEach((val, index) => {
        const page = Math.floor(index / this.col)
        if (!twoDimenArr[page]) { // 判断是否存在
          twoDimenArr[page] = []
        }
        twoDimenArr[page].push(val)
      })
      return twoDimenArr
    },
    // 遍历数组填色或者去色
    ergodicArrColouring (val, currentArr, tag) {
      let arr = val
      arr.forEach(el => {
        currentArr.forEach(val => {
          if (tag === 'add') {
            if (el.x === val.x && el.y === val.y) {
              el.x = val.x
              el.y = val.y
              el.color = val.color
            }
            if (el.y === 3) {
              console.log(el)
              // console.log('触底了')
            }
          } else if (tag === 'remove') {
            if (el.x === val.x - 1 && el.y === val.y) {
              el.color = ''
            }
          }
        })
      })
      return arr
    }

  }
}
</script>

<style lang="scss"  scoped>
.grid{
  width: 800px;
  height: 1200px;
  color:#fff;
  display: inline-block;
  margin: 0 auto;
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: flex-start;
  // align-items: flex-start;
  .row{
    width: 400px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    // border-right: 1px #5e5e5e solid;
    border-left:2px #5e5e5e solid;
    .col{
      width: 40px;
      height: 100%;
      border-right:2px #5e5e5e solid;
      border-bottom:2px #5e5e5e solid;
    }
  }
  .borderLeft{
    border-left:1px #f00 solid;
  }
  .c1{
    background: #2f74b5;
  }
  .c2{
    background: #d68855;
  }
}

</style>
